
<template>
  <div class="login-content" >
    <el-card class="content">
      <div class="head">
        <div style="text-align: center; margin-bottom: 10%;">登录</div>
      </div>
      <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item >
        <template #label>
          <span>用户名:</span>
        </template>
      <el-input v-model="form.username"/>
      </el-form-item>
      <el-form-item label="用户密码">
      <el-input v-model="form.password" />
      </el-form-item>
        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
          <el-button type="primary" @click="Submit" style="width: 120px;">登录</el-button>
        </div>
       </el-form>
    </el-card>
</div>
</template>
<script  setup>
import { post } from 'jquery'
import axios from 'axios'
import { reactive ,onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import config from '../config'
import {checkLogin, login} from '../apis/apis'
import router from "@/router/router";


const form = reactive({
  username: '',
  password: ''
})
onMounted(()=>{
  if (localStorage.getItem("token")!=null && localStorage.getItem("token")!=undefined){
    checkLogin({}).then(d=>{
      if (d.data.code==0){
        router.replace("/wordPage")
      }
    })
  }
})
const Submit = () => {
  login(form).then(result =>{
        if(result.data.code != -1){
          ElMessage("登陆成功！");
         console.log( result.data.message);

         localStorage.setItem('token',result.data.message)
          router.replace("/wordPage")
        }else{
          ElMessage('登陆失败！')
        }    
  })
}

</script>
<style>
.login-content{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.content{
  display: flex;
  justify-content: center;
}
</style>